<template>
    <div class="btn-box">
        <button @click="tap" >-</button>
        <div>{{this.good.num}}</div>
        <button @click="add" class="add">+</button>
    </div>
</template>
<script>
import {mapMutations,mapState} from 'vuex'
export default {
    props:['good'],
    data () {
        return {
            num:0,
            totalNum:0,
            totalPrice:0
        }
    },
    created(){
        this.$set(this.good,'num',1)
    },
    methods:{
        ...mapMutations(['add1','tap1']),
        tap(){
            this.tap1(this.good)
            this.total()
        },
        add(){
            // this.good.num++
            this.add1(this.good)
            console.log(this.$store.state.list);
            this.total()
        },
        total(){
            let num = 0;
            let price = 0;
            this.list.forEach(item => {
                num+=item.num
                price+=item.num*item.price
            })
            this.totalNum = num
            this.totalPrice = price
            console.log(this.totalNum,this.totalPrice);
        }
    },
    computed:{
        ...mapState(['list'])
        
    }
}
</script>
<style scoped lang="sass">
.btn-box
    display: flex
    align-items: center
    margin-top: .4rem
    margin-left: .6rem
    div
    button
        width: .6rem
        height: .6rem
        border-radius: 50%
    .add
        background: pink
</style>